<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <script type="text/javascript" src="./js/rem.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <title>Document</title>
</head>
<style type="text/css" media="screen">
.infor-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(./image/repeat.png) repeat-y;
    background-size:cover;
}
.infor-wrapper img {
    display: none;
    width: 100%;
}
.wrapper {
    position: absolute;
    top: 4.05rem;
    left: 0.65rem;
}
.wrapper input {
    display: block;
    background: none;
    width: 2.3rem;
    height: 0.3rem;
    padding: 0 0.1rem;
    margin-bottom: 0.1rem;
    border: 2px solid rgb(252, 229, 123);
    border-radius: 8px;
    color: #fff;
    outline: none;
}
::-webkit-input-placeholder { 
    color:rgb(206, 66, 58);
    text-align: center;
    font-weight: 600;
}
.wrapper a {
    display:block;
    background: rgb(252, 229, 123);
    color: rgb(195, 26, 44);
    height: 0.3rem;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 8px;
    font-weight: 600;
}
/*.infor_one {
    background-image: url(./image/get_bg1.png); 
    background-repeat: no-repeat;
}
.infor_two {
    background-image: url(./image/get_bg2.png); 
    background-repeat: no-repeat;
}
.infor_three {
    background-image: url(./image/get_bg3.png); 
    background-repeat: no-repeat;
}
.infor_four {
    background-image: url(./image/get_bg4.png); 
    background-repeat: no-repeat;
}
.infor_five {
    background-image: url(./image/get_bg5.png); 
    background-repeat: no-repeat;
}
.infor_seven {
    background-image: url(./image/get_bg7.png); 
    background-repeat: no-repeat;
}
.infor_eight {
    background-image: url(./image/get_bg8.png); 
    background-repeat: no-repeat;
}*/
</style>
<body>
<div class="infor-wrapper" id="infor">
    <img id="img1" src="./image/get_bg1.png">
    <img id="img2" src="./image/get_bg2.png">
    <img id="img3" src="./image/get_bg3.png">
    <img id="img4" src="./image/get_bg4.png">
    <img id="img5" src="./image/get_bg5.png">
    <img id="img7" src="./image/get_bg7.png">
    <img id="img8" src="./image/get_bg8.png">
    <div class="wrapper">
        <div class="form">
        <input id="name" type="" placeholder="姓名">
        <input id="phone" type="number" type="" placeholder="联系方式" >
        <span id="error" style="display: none; color: #fff;">请输入正确的联系方式</span>
        <input id="city" type="" placeholder="所在城市">
        </div>
        <div>
            <a href="javascript:0" id="btn">提走年货</a>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var loc = window.location.search;
    var index_step = loc.split('=')[1]
    var infor = $('#infor')
    switch (index_step) {
        case '1':
            // infor.addClass('infor_one')
            $('#img1').show()
        break;
        case '2':
            // infor.addClass('infor_two')
            $('#img2').show()
        break;
        case '3': case '6':
            // infor.addClass('infor_three')
            $('#img3').show()
        break;
        case '4':
            // infor.addClass('infor_four')
            $('#img4').show()
        break;
        case '5':
            // infor.addClass('infor_five')
            $('#img5').show()
        break;
        case '7': case '9':
            // infor.addClass('infor_seven')
            $('#img7').show()
        break;
        case '8':
            // infor.addClass('infor_eight')
            $('#img8').show()
        break;
    }
    $('#phone').focus(function() {
        $('#error').hide()
        $('#phone')[0].style.marginBottom = '0.1rem'
    })
    $('#btn').click(function() {
        var phone_text = $('#phone').val()
        if (!isPoneAvailable(phone_text)) {
            $('#error').show()
            $('#phone')[0].style.marginBottom = 0
        } else {
            var name_text = $('#name').val()
            var city_text = $('#city').val()
            // 提交
            window.location.href='./loading.html'
        }
    })
    function isPoneAvailable(pone) {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(pone)) {
          return false;
        } else {
          return true;
        }
    }
</script>
</html>